<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-row type="flex">
        <el-col :span="12">
          <el-button
            type="primary"
            size="small"
            @click="addClient"
          >添加页面</el-button>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" justify="end">
            <el-select
              v-model="agent"
              placeholder="全部经纪"
              @change="checkoutBtn"
            >
              <el-option
                v-for="item in selData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-input v-model="name_contains" placeholder="请输入关键字">
              <el-button slot="append" @click="checkoutBtn">筛选</el-button>
            </el-input>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="image" label="图片" width="120px">
          <template v-slot="{ row }">
            <img width="100px" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="agent.name" label="经纪" />
        <el-table-column prop="wechat" label="微信" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-row>
              <el-button
                type="primary"
                size="small"
                @click="editbtn(row.id)"
              >编辑</el-button>
              <el-button
                type="danger"
                size="small"
                @click="delbtn(row.id)"
              >删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页组件 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="limit"
      @current-change="currPage"
    />
    <AddDialog
      ref="forms"
      :show-client-dialog.sync="showDialog"
      @updateEvent="loadClientList"
    />
  </el-card>
</template>

<script>
// 引入客户列表，客户数量,删除客户,获取客户详情接口
import {
  getClientList,
  getClientCount,
  delClientCount,
  ClientCountDetail
} from '@/api/client'
import AddDialog from './componets/client-dialog.vue'
import { getBrokers } from '@/api/brokers'

export default {
  components: { AddDialog },
  data() {
    return {
      tableData: [], // 列表数组
      selData: [], // 经纪人数组
      limit: 2, // 每页获取条数
      start: 0, // 开始获取的位置
      total: 0, // 总数
      showDialog: false,
      agent: null, // 经纪人
      name_contains: '' // 搜索输入框
    }
  },
  async created() {
    this.loadClientList()
  },
  methods: {
    // 渲染列表功能
    async loadClientList() {
      const res = await getClientList({
        _limit: this.limit,
        _start: this.start,
        agent: this.agent,
        name_contains: this.name_contains
      })
      // console.log(116, res)
      this.tableData = res.data
      // 获取页面数量
      const result = await getClientCount({
        agent: this.agent,
        name_contains: this.name_contains
      })
      // console.log(122, result)
      this.total = result.data
      // 获取经纪人
      const ress = await getBrokers()
      this.selData = ress.data
      this.selData.unshift({ name: '全部经纪人' })
    },
    // 分页功能
    currPage(curpages) {
      this.start = curpages === 1 ? 0 : (curpages - 1) * this.limit - 1
      this.loadClientList()
    },
    // 添加客户信息功能
    addClient() {
      this.showDialog = true
    },
    // 删除客户信息功能
    delbtn(id) {
      console.log(123)
      this.$confirm('确定要删除吗？', '删除', {
        type: 'warning'
      })
        .then(async() => {
          await delClientCount(id)
          this.loadClientList()
        })
        .catch(() => {
          console.log('取消了删除')
        })
    },
    // 编辑功能
    async editbtn(id) {
      this.showDialog = true
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)'
      })
      const res = await ClientCountDetail(id)
      console.log(163, res)
      this.$refs.forms.formData = res.data
      loading.close()
      this.$refs.forms.ClientCountDetail(id)
    },
    // 筛选功能
    checkoutBtn() {
      this.loadClientList()
    }
  }
}
</script>

<style lang="scss">
.el-card {
  margin-top: 20px;
  margin-left: 10px;
  width: 98%;
}
// 分页器
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
// 加载器
.el-loading-mask{
  z-index: 99999 !important;
}
</style>
